<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <input type="text" class="fruit_pushtext">
    <button onclick="fruit_push()">水果添加</button>
    <div class="fruit">
        水果全选<input type="checkbox">
        <ul></ul>
    </div>
    <button onclick="left()">👈</button>
    <button onclick="right()">👉</button>
    <div class="vegetable">
        蔬菜全选<input type="checkbox">
        <ul></ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var fruit = ["苹果", "香蕉", "火龙果", "哈密瓜"]
        var vegetable = ["洋葱", "西红柿", "土豆", "芹菜"]
    </script>
    <script>
        //渲染
        function apply(a, b) {
            $(b).html("")
            a.forEach(item => {
                $(b).append(`
                <li><input type="checkbox"><span>${item}</span></li>
                `)
            });
        }
        apply(fruit, ".fruit ul")
        apply(vegetable, ".vegetable ul")
    </script>
    <script>
        //右边
        function right() {
            $(".fruit ul li input:checked").each((index, item) => {
                var ind = fruit.indexOf(item.nextSibling.textContent)
                fruit.splice(ind, 1)
                apply(fruit, ".fruit ul")
                vegetable.push(item.nextSibling.textContent)
                apply(vegetable, ".vegetable ul")
            })
        }
    </script>
    <script>
        //左边
        function left() {
            $(".vegetable ul li input:checked").each((index, item) => {
                var ind = vegetable.indexOf(item.nextSibling.textContent)
                vegetable.splice(ind, 1)
                apply(vegetable, ".vegetable ul")
                fruit.push(item.nextSibling.textContent)
                apply(fruit, '.fruit ul')
            })
        }
    </script>
    <script>
        //水果全选
        function fruit_all() {
            $(".fruit input").on("click", () => {
                $(".fruit ul li input").each((index, item) => {
                    item.checked = event.target.checked
                })
            })
        }
        fruit_all()
    </script>
    <script>
        //蔬菜全选
        function vegetable_all() {
            $(".vegetable input").on("click", () => {
                $(".vegetable ul li input").each((index, item) => {
                    item.checked = event.target.checked
                })
            })
        }
        vegetable_all()
    </script>
</body>

</html>